<template>
	<view>
		<view class="image1">
			<image src="../../static/bg3@2x.png" mode=""></image>
		</view>
		<view class="invest">
			<u-navbar :bgColor="bgColor" leftIconColor='#fff'
				@rightClick="$fun.jump(`/pageA/wallet/walletdetail?id=${id}&name=${title}`)" :placeholder='true'
				:autoBack="true">
				<view class="u-nav-slot" slot="center">
					<view class="">{{title}}</view>
				</view>
				<view class="u-nav-slot" slot="right">
					<view class="">{{$t("wallet.name2")}}</view>
				</view>
			</u-navbar>

			<view class="invest_mian">
				<view class="maintop">
					<image src="../../static/zlf.png" mode=""></image>
					<view class="istext">
						<text>（{{holdData.holdRule}}）</text>
					</view>
				</view>
				<view class="maincenter">
					<view class="istext">
						<view class="allm" style="width: 101rpx;"></view>
						<view class="" style="text-align: center;">
							<view class="allm">{{$t("wallet.name44")}}</view>
							<view class="money">{{holdData.hold}}</view>
						</view>
						<view class="">
							<view class="name" @click="$fun.jump(`./policy`)">{{$t("wallet.name1")}}</view>
							<view class="name" @click="$fun.jump(`/pageC/lease/leaselist`)">{{$t("wallet.name45")}}</view>
						</view>
					</view>
					<view class="bot">
						<view class="botname">
							<view class="">{{holdData.lastmonth}}</view>
							<view class="text">{{$t("wallet.name46")}}</view>
						</view>
						<view class="botname">
							<view class="">{{holdData.total}}</view>
							<view class="text">{{$t("wallet.name47")}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="invest_nav">
			<view class="name">{{$t("wallet.name48")}}</view>
			<view class="list">
				<view class="navitem" :class="index==isSel?'navactive':''" v-for="(item,index) in navlist" :key="index"
					@click="isbtnsel(item,index)">
					<view class="">{{item.day}}{{$t('wallet.name52')}}</view>
					<view class="text">{{$t("wallet.name49")}}{{item.value}}%</view>
				</view>
			</view>
		</view>
		<view class="invest_input">
			<view class="name">{{$t("wallet.name50")}}</view>
			<view class="textinput">
				<input type="number" v-model="money" placeholder-class="pltext" :placeholder="$t('wallet.name6')+$t('wallet.name51')" />
				<!-- <view class="max">最大</view> -->
			</view>
		</view>
		<view class="inbtn" @click="btnhold">{{$t("wallet.name5")}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: "transparent",
				navlist: [],
				title: '',
				isSel: 0,
				holdData: {
					hold: 0,
					holdRule: '',
					holdlimit: 0,
					lastmonth: 0,
					total: 0
				},
				money: '',
				store_days: '',
				id: ''
			}
		},
		onLoad(option) {
			this.title = option.name
			this.id = option.id
		},
		onShow() {
			this.gethold()
		},
		methods: {
			isbtnsel(item, index) {
				this.isSel = index
				this.store_days = item.day
			},
			gethold() {
				this.$fun.ajax.post('butt/holdData', {}).then(res => {
					this.holdData = res.data
					this.navlist = []
					for (let key in res.data.rebate) {
						this.navlist.push({
							day: key,
							value: res.data.rebate[key]
						})
					}
					this.store_days = this.navlist[0].day
				})
			},
			btnhold() {
				if (this.money) {
					this.$fun.jump(
						`/pageC/shop/shopdetail?id=95&from=3&fmoney=${this.money}&store_days=${this.store_days}`)
				} else {
					this.$fun.msg(this.$t("wallet.name6")+this.$t("wallet.name51"))
				}
				// this.$fun.ajax.post('butt/hold', {
				// 	money: this.money,
				// 	store_days: this.store_days
				// }).then(res => {
				// 	if (res.code == 1) {
				// 		this.$fun.msg(res.msg)
				// 		this.money = ''
				// 		this.gethold()
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F1EE;
	}

	.image1 {
		width: 750rpx;
		height: 400rpx;
		position: absolute;
		top: 0;
		z-index: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.u-navbar__content__right {
		/* #ifdef MP-WEIXIN */
		margin-right: 180rpx;
		font-size: 24rpx;
		/* #endif */
	}

	.invest {
		.u-nav-slot {
			color: #fff !important;
		}

		position: relative;
		z-index: 1;
		width: 750rpx;
		/* #ifndef MP-WEIXIN */
		// height: 464rpx;
		/* #endif */
	}

	.invest_mian {
		width: 690rpx;
		height: 334rpx;
		margin: 20rpx auto;


		.maintop {
			display: flex;

			image {
				width: 98rpx;
				height: 27rpx;
				margin-top: 20rpx;
			}

			padding-left: 20rpx;
			width: 690rpx;
			height: 88rpx;
			line-height: 70rpx;
			background: #ffffff1c;
			font-family: YouSheBiaoTiHei;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			font-size: 36rpx;
			color: #FFFFFF;

			.istext {
				overflow: hidden;
				white-space: nowrap;
				width: 76%;
				margin: 0 16rpx;
			}

			text {
				font-weight: 400;
				font-size: 24rpx;
				display: inline-block;
				animation: scroll-left 10s linear infinite;
			}

			@keyframes scroll-left {
				0% {
					transform: translateX(100%);
				}

				100% {
					transform: translateX(-100%);
				}
			}
		}

		.maincenter {
			width: 690rpx;
			height: 264rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: -25rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;

			.istext {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.allm {
					// width: 101rpx;
					margin-bottom: 20rpx;
				}

				.name {
					// width: 101rpx;
					padding: 0 10rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border: 2rpx solid #5990FF;
					background: #FFFFFF;
					font-weight: 500;
					font-size: 24rpx;
					color: #5990FF;
					border-bottom-left-radius: 30rpx;
					border-top-left-radius: 30rpx;
					margin-right: -1rpx;
				}
			}

			.money {
				font-weight: 500;
				font-size: 48rpx;
				color: #333333;
				text-align: center;
				margin-top: -10rpx;
			}

			.bot {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				display: flex;
				justify-content: space-around;
				text-align: center;
				margin-top: 40rpx;

				.text {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.invest_nav {
		width: 690rpx;
		// height: 368rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx 10rpx 30rpx 30rpx;
		margin: 0 auto;

		.name {
			font-weight: 500;
			font-size: 28rpx;
			color: #19181A;
			margin-left: 20rpx;
		}

		.list {
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: flex-start;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
		}

		.navitem {
			width: 196rpx;
			// height: 120rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 1rpx solid #CCCCCC;
			padding: 30rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #19181A;
			margin-top: 20rpx;
			// margin-left: 22rpx;

			.text {
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}
		}

		.navactive {
			border: 1rpx solid #5990FF;

			color: #5990FF;

			.text {
				color: #5990FF;
			}
		}
	}

	.invest_input {
		width: 690rpx;
		// height: 188rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		margin: 30rpx auto 90rpx;

		.name {
			font-weight: 500;
			font-size: 28rpx;
			color: #19181A;
		}

		.textinput {
			width: 630rpx;
			height: 80rpx;
			background: #F6F6F6;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			margin-top: 20rpx;

			.pltext {
				font-weight: 400;
				font-size: 28rpx;
				color: #CCCCCC;
			}

			.max {
				font-weight: 500;
				font-size: 32rpx;
				color: #5990FF;
			}
		}
	}

	.inbtn {
		width: 690rpx;
		height: 88rpx;
		background: #5990FF;
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: 0 auto;
	}
</style>